<template>
  <div>
    <div class="heard-right">
      <stageList
        width="250px"
        class="inline mr10"
        @stageCallback = 'stageCallback'></stageList>
    </div>
    <button class="button-block second-right" v-show="boardSetupMaintain" @click="save">保存</button>
    <div class="p20">
      <div class="tableClass">
        <table style="width: 800px">
          <tr>
            <th>显示项目名称<span class="red-color">*</span></th>
            <td colspan="4">
              <input
                class="input-n240"
                v-validation="{required: true, query: 'projectShowName'}"
                v-model="projectShowName"
                style="width: 100%" />
            </td>
          </tr>
          <tr>
            <th>系统属性</th>
            <td colspan="4">
              <zz-radio
                style="width: 100px"
                :key="item.id"
                :value = "item.id"
                v-for="item in radioList"
                @handle="handleRadio"
                :checked = item.check>
                {{item.name}}
              </zz-radio>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: '',
    data () {
      return {
        stageId: '',
        propertyStr: 1,
        projectShowName: '',
        radioList: [
          {id: 1, check: true, name: '智慧工地'},
          {id: 2, check: false, name: '数字工地'}
        ],
        boardSetupMaintain: false
      }
    },
    computed: {
      ...mapGetters({
        stageList: 'getstageList',
        stageListDefault: 'getstageListDefault',
        currentUser: 'currentUser'
      })
    },
    mounted () {
      this.stageId = this.stageListDefault.stageId
      this.findProjectInfo()
      this.getAuth()
    },
    methods: {
      getAuth () {
        let data = {
          'query.project_id': this.currentUser.pjId,
          'query.fun_code': 'p_BoardSetup_data_maintain'
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.companyServer}/front/hasFunction.htm`,
          data: this.$qs.stringify(data)
        }).then(res => {
          this.boardSetupMaintain = res.data.hasFunction
        })
      },
      findProjectInfo () {
        let data = {
          'companyId': this.currentUser.coId,
          'projectId': this.currentUser.pjId
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/projectInformation/projectShowName`,
          data: this.$qs.stringify(data, {indices: false})
        }).then(res => {
          if (res.data.errorMsg) {
            this.$message.error(res.data.errorMsg)
          } else {
            if (res.data.data.projectShowName) {
              this.projectShowName = res.data.data.projectShowName
            }
            if (res.data.data.systemProperty) {
              this.propertyStr = res.data.data.systemProperty
            }
            this.radioList.forEach(x => {
              x.check = false
              if (x.id === this.propertyStr) {
                x.check = true
              }
            })
          }
        })
      },
      save () {
        this.$vaildation(this).then(() => {
          let data = {
            'companyId': this.currentUser.coId,
            'projectId': this.currentUser.pjId,
            'projectShowName': this.projectShowName,
            'systemProperty': this.propertyStr
          }
          this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/projectInformation/save`,
            data: this.$qs.stringify(data, {indices: false})
          }).then(res => {
            if (res.data.errorMsg) {
              this.$message.error(res.data.errorMsg)
            } else {
              this.$message.success('保存成功！')
            }
          })
        })
      },
      handleRadio (value) {
        this.propertyStr = value
        this.radioList.forEach(x => {
          x.check = false
          if (x.id === value) {
            x.check = true
          }
        })
      },
      stageCallback (val) {
        this.stageId = val.key
      }
    }
  }
</script>
<style lang="scss" scoped>
  .heard-right{
    position: absolute;
    top: 65px;
    right: 20px;
  }
  .second-right{
    position: absolute;
    top: 118px;
    right: 20px;
  }
  .red-color{
    color: $red;
  }
</style>
